<script setup lang="ts">
import { addCouponItemAPI } from '@/api/coupon'
import { useCouponStore } from '@/stores/coupon'
import { Message } from '@arco-design/web-vue'
import { storeToRefs } from 'pinia'
import { ref } from 'vue'

const { couponList } = storeToRefs(useCouponStore())
const { getCouponList } = useCouponStore()

const code = ref('')

const handleUseCode = async () => {
  const { id, msg } = await addCouponItemAPI({ code: code.value })
  getCouponList()
  id ? Message.success('兑换成功！') : msg ? Message.error(msg) : Message.error('不存在该兑换码！')
  code.value = ''
  console.log(couponList.value)
}
</script>

<template>
  <div class="p-50px w-full h-full">
    <h2 class="text-30px color-gray-6 mb-4">我的优惠券</h2>
    <div class="flex justify-between">
      <a-tabs default-active-key="2" class="w-full">
        <a-tab-pane key="1" title="未使用">
          <div v-if="couponList.filter((item: any) => item.deadline != '0').length" class="grid grid-cols-2 gap-5">
            <div
              v-for="coupon in couponList.filter((item: any) => item.deadline != '0')"
              :key="coupon.id"
              class="flex items-center justify-between p-3 rounded border border-primary border-solid"
            >
              <div class="flex flex-col gap-2">
                <p class="text-lg">{{ coupon.name }} ({{ coupon.discount }}元)</p>
                <p class="text-4 text-gray-4">{{ coupon.description }}</p>
              </div>
              <div>
                <p class="text-gray">{{ new Date(+coupon.deadline).toLocaleDateString().replace(/\//g, '-') }}</p>
              </div>
            </div>
          </div>
          <div v-else class="mt-30px">
            <a-empty description="暂无优惠券" />
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" title="已使用">
          <div v-if="couponList.filter((item: any) => item.deadline == '0').length" class="grid grid-cols-2 gap-5">
            <div
              v-for="coupon in couponList.filter((item: any) => item.deadline == '0')"
              :key="coupon.id"
              class="flex items-center justify-between p-3 rounded border border-primary border-solid"
            >
              <div class="flex flex-col gap-2">
                <p class="text-lg">{{ coupon.name }} ({{ coupon.discount }}元)</p>
                <p class="text-4 text-gray-4">{{ coupon.description }}</p>
              </div>
              <div>
                <p class="text-gray">{{ new Date(+coupon.deadline).toLocaleDateString().replace(/\//g, '-') }}</p>
              </div>
            </div>
          </div>
          <div v-else class="mt-30px">
            <a-empty description="暂无优惠券" />
          </div>
        </a-tab-pane>
        <a-tab-pane key="3" title="已失效">
          <div v-if="false">
            <h1>待收货</h1>
          </div>
          <div v-else class="mt-30px">
            <a-empty description="暂无优惠券" />
          </div>
        </a-tab-pane>
        <a-tab-pane key="4" title="兑换优惠券">
          <div>口令：tanyun666</div>
          <div class="mt-4 flex gap-10">
            <div class="w-240px">
              <a-input v-model="code" size="large" placeholder="请输入兑换码"></a-input>
            </div>
            <a-button @click="handleUseCode" class="bg-primary! color-white! w-120px! h-36px hover:opacity-85"
              >确认兑换</a-button
            >
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<style scoped>
:deep(.arco-empty-description) {
  font-size: 20px;
}

:deep(.arco-empty-image) {
  font-size: 80px;
}

:deep(.arco-tabs-tab-active) {
  color: #76a5af;
}

:deep(.arco-tabs-nav-ink) {
  background-color: #76a5af;
}

/* 自定义input样式 */
:deep(.arco-input-wrapper) {
  background-color: white;
}

:deep(.arco-input-wrapper) {
  border-color: #ddd;
}

:deep(.arco-input-wrapper:hover) {
  background-color: #fff;
  border-color: #76a5af;
}

:deep(.arco-input-wrapper.arco-input-focus) {
  border-color: #76a5af;
}

:deep(.arco-input-search .arco-input-suffix) {
  font-size: 20px;
}
</style>
